<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Project Eduvid</title>
<!-- metadata-->
<script src="../../jquery/jquery.js" type="text/javascript" charset="utf-8"></script>

<script src="wiki_parse.js" type="text/javascript"></script>
<!-- metadata-->
<link rel="stylesheet" href="eduvid.css" type="text/css" />



<script type="text/javascript" src="../../jquery/jquery.ui-1.5.2/ui_tab/jquery.tabs.js"></script>
<script src="../../jquery/jquery.ui-1.5.2/ui_tab/jquery.history_remote.pack.js" type="text/javascript"></script>

<link rel="stylesheet" href="../../jquery/jquery.ui-1.5.2/ui_tab/jquery.tabs.css" type="text/css" media="print, projection, screen">

<!-- Additional IE/Win specific style sheet (Conditional Comments) -->
        <!--[if lte IE 7]>
        <link rel="stylesheet" href="../../jquery/jquery.ui-1.5.2/ui_tab/jquery.tabs-ie.css" type="text/css" media="projection, screen">
	<![endif]-->



<script type="text/javascript">
var view_slide_show = null ;
var record_slide_show = null ;

function Slide_Show(id){

    this.title = "How to Structure a LaTeX Document";
    this.theme = "dark_blue";
    this.current_slide_number = 0 ; 
    this.TOTAL_SLIDES = 0;
    this.animation_mode = 3;
    this.id = id;
}

Slide_Show.prototype.fun_update_slideshow = function(but_id){
		
	    switch (but_id){
	    	case "html": this.fun_goto_slide(this.current_slide_number + 1) ; break;
	    	case "next_slide": this.fun_goto_slide(this.current_slide_number + 1) ; break;
	    	case "prev_slide": this.fun_goto_slide(this.current_slide_number - 1) ; break;
	    	case "first": this.fun_goto_slide(1); break;
	    	case "last": this.fun_goto_slide(this.TOTAL_SLIDES); break;
	    	default : alert("where you clicked man?? id is undefined for this");
	    }//switch
}//end of function


Slide_Show.prototype.init = function() {
	var self = this ; 
	$("#"+ self.id).prepend("<div class=\"control\" id=\"controlpanel\">\
			<center>\
				<input class=\"my_butt\" type=\"button\" value=\"First\" id=\"first\"/>\
				<input class=\"my_butt\" type=\"button\" value=\"Previous\" id=\"prev_slide\"/>\
				<span id=\"slide_number\">Slide Number </span>\
				<input class=\"my_butt\" type=\"button\" value=\"Next Slide\" id=\"next_slide\"/>\
				<input class=\"my_butt\" type=\"button\" value=\"Last\" id=\"last\"/>\
				<select>\
				  <option value =\"volvo\">Volvo</option>\
				  <option value =\"saab\">Saab</option>\
				  <option value =\"opel\">Opel</option>\
				  <option value =\"audi\">Audi</option>\
				</select>\
			</center>\
			</div>");

	$("#"+ self.id +" > #html").addClass("my_butt");
	$("#"+ self.id +" .slide > h1").addClass("heading");

	$("#"+ this.id +" .my_butt").click(function(){
		self.fun_update_slideshow($(this).attr("id"));
		self.update_slide_number_to_display();
	});

	
	self.TOTAL_SLIDES = $("#"+ this.id +" .slide").length ;

	self.hide_all_slides();
	self.fun_goto_slide(1);
		
}

Slide_Show.prototype.hide_all_slides = function() {
	$("#"+ this.id +" #html .slide").hide();

}
Slide_Show.prototype.update_slide_number_to_display = function() {
	var self = this ;
	$("#"+ this.id +" > #controlpanel  #slide_number").html(self.current_slide_number);
}
Slide_Show.prototype.fun_goto_slide =  function(num){
	var self = this;
	
    if(num <= this.TOTAL_SLIDES && num >= 1 ){
        
    	switch(this.animation_mode){
	    	case 1 : 
	    		$("#"+ self.id +" > #html > #slide"+self.current_slide_number+"").hide(400);
				$("#"+ self.id +" > #html > #slide"+num+"").show(400);
		    	break;
		    case 2 : 
		    	$("#"+ self.id +" > #html  > #slide"+ self.current_slide_number+"").slideUp();
				$("#"+ self.id +" >  #html >  #slide"+num+"").slideDown();
			break;
		    case 3 : 
		    	$("#"+ self.id +" >  #html >  #slide"+ self.current_slide_number+"").fadeOut(100,function(){ 
    	    		$("#"+ self.id +" >  #html  > #slide"+num+"").fadeIn(100);
    			});
			break;
		    case 4 : 
		    	$("#"+ self.id +"  > #html  > #slide"+self.current_slide_number+"").fadeOut(200 ,function(){ 
    	    		$("#"+ self.id +"  > #html  > #slide"+num+"").fadeIn(200);
    			});
			break;
	    	default : 
	    		$("#"+ self.id +" > #html  > #slide" + self.current_slide_number+"").hide();
				$("#"+ self.id +" >  #html  > #slide" + num+"").show();
			break;
	    	}//switch
    	this.current_slide_number = num ;
	}else{
		alert("not allowed");
	}
}//end of function

function Record_Slide_Show(id){

    this.title = "How to Structure a LaTeX Document";
    this.theme = "dark_blue";
    this.current_slide_number = 0 ; 
    this.TOTAL_SLIDES = 0;
    this.animation_mode = 3;
    this.id = id;

    this.t_old = null;
    this.start_time = null;
    this.time_data = null;
    this.time_id = null;
    this.local_timing_xml_ob = null ;
        
}




$(document).ready(function (){
		$("#main_area").tabs();
		$("#Edit_Mode_Area > #load_it").click(function(){
			$.get("wiki.txt", {}, function(data_txt){
				$("#wiki").attr("value" , data_txt);
			});
		});

		$("#Edit_Mode_Area > #save_it").click(function(){
			//post content to save_into_file.php?name="slideshow.html"&content="this is the content"
			//$.post("test.php", { timingdotxml : (new XMLSerializer()).serializeToString(local_timing_xml_ob)} , function(data){alert("Sent !!");} , "xml");
			slideshow_html = document.getElementById("wiki").value.wiki2html()
			topic_depth = 0;
			chapter_index = 0 ; 
			
			$.post("save_to_file.php", { content: slideshow_html , file_name: "slideshow.html" } , function(data){alert(data);}); 
		});
		$("#Edit_Mode_Area > #make_html").click(function(){
			$("#View_Mode_Area > #html").load("slideshow.html" ,{}, function(){
				view_slide_show = new Slide_Show("View_Mode_Area");
				view_slide_show.init();			   
			});
			
		});

		$("#Record_Mode_Area > #record_it").click(function(){
			$("#Record_Mode_Area").prepend("<div id=\"record_area\"><div>");
			$("#Record_Mode_Area > #record_area").load("slideshow.html" ,{}, function(){
				record_slide_show = new Record_Slide_Show("Record_Mode_Area");
				record_slide_show.init();			   
			});
		});
		
		
		
});



    
	
</script>


</head>


<body>
   
        
<div id="main_area">
	
	<ul>
        <li><a href="#Edit_Mode_Area"><span>Edit Mode</span></a></li>
        <li><a href="#View_Mode_Area"><span>View Mode</span></a></li>
        <li><a href="#Record_Mode_Area"><span>Record Mode</span></a></li>
        <li><a href="#Play_Mode_Area"><span>Play Mode</span></a></li>
    </ul>
    
	<div id="Edit_Mode_Area">
	
		<textarea rows="20" cols="100" id="wiki" >Edit</textarea>
		<br>
		<input type="button" value=" Load wiki from server " id="load_it">
		<input type="button" value=" Save html to server " id="save_it">
		<input type="button" value=" make html" id="make_html">
		
	
	</div>
	<div id="View_Mode_Area">
		<div id="html"></div>
	</div>
	<div id="Record_Mode_Area"><input type="button" value=" Load wiki from server " id="record_it">
	</div>
	<div id="Play_Mode_Area">mode 3</div>
</div>

</body>
</html>

